<style lang="less">
#fenceMap {
  width: 100%;
  height: 340px;
}
</style>
<template>
  <div style="background:#fff">
    <Tabs>
      <TabPane label="围栏列表">
        <div class="search">
          <Row>
            <Col>
              <Card>
                <Row>
                  <Form
                    ref="searchForm"
                    :model="searchForm"
                    inline
                    :label-width="70"
                    class="search-form"
                  >
                    <Form-item label="围栏名称">
                      <Input
                        type="text"
                        v-model="searchForm.fenceName"
                        :clearable="true"
                        placeholder="请输入围栏名称"
                        style="width: 200px"
                      />
                    </Form-item>
                    <Form-item label="围栏类型">
                      <Select
                        v-model="searchForm.fenceType"
                        :transfer="true"
                        :clearable="true"
                        style="width: 200px"
                      >
                        <Option
                          v-for="item in fenceDict"
                          :value="item.value"
                          :key="item.value"
                        >{{ item.label }}</Option>
                      </Select>
                    </Form-item>
                    <Form-item style="margin-left:-35px;" class="br">
                      <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                      <Button @click="handleReset">重置</Button>
                    </Form-item>
                  </Form>
                </Row>
                <Row class="operation">
                  <Button @click="add" type="primary" icon="md-add" v-has="'add'">新增</Button>
                  <Button @click="bind" type="warning" icon="md-attach" v-has="'bind'">绑定设备</Button>
                  <circleLoading v-if="operationLoading" />
                </Row>
                <Row>
                  <Alert show-icon>
                    已选择
                    <span class="select-count">{{selectCount}}</span> 项
                    <a class="select-clear" @click="clearSelectAll">清空</a>
                  </Alert>
                </Row>
                <Row>
                  <Table
                    :loading="loading"
                    border
                    :columns="columns"
                    :data="data"
                    sortable="custom"
                    @on-sort-change="changeSort"
                    @on-selection-change="showSelect"
                    ref="table"
                  ></Table>
                </Row>
                <Row type="flex" justify="end" class="page">
                  <Page
                    :current="searchForm.current"
                    :total="total"
                    :page-size="searchForm.size"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    :page-size-opts="[10,20,50,100]"
                    size="small"
                    show-total
                    show-elevator
                    show-sizer
                  ></Page>
                </Row>
              </Card>
            </Col>
          </Row>
          <Modal
            :title="modalTitle"
            v-model="fenceModalVisible"
            :mask-closable="false"
            :width="1000"
            :styles="{top: '30px'}"
          >
            <div id="fenceMap"></div>

            <Form
              ref="fenceForm"
              :model="fenceForm"
              :label-width="110"
              :rules="fenceFormValidate"
              style="padding-top:20px;"
            >
              <Row>
                <Col :span="12">
                  <FormItem label="围栏名称" prop="fenceName">
                    <Input v-model="fenceForm.fenceName" style="width:240px;" />
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem label="围栏类型" prop="fenceType">
                    <RadioGroup
                      v-model="fenceForm.fenceType"
                      @on-change="radioChange"
                      type="button"
                    >
                      <Radio
                        v-for="item in fenceDict"
                        :value="item.value"
                        :key="item.value"
                        :label="item.value"
                      >{{item.label}}</Radio>
                    </RadioGroup>
                    <Button
                      type="warning"
                      icon="ios-brush"
                      :loading="submitLoading"
                      @click="startDraw"
                    >开始绘制</Button>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col :span="12">
                  <FormItem label="坐标点" prop="latlng">
                    <Input
                      v-model="fenceForm.latlng"
                      placeholder="在地图上绘制获得"
                      style="width:240px;"
                      :readonly="true"
                    />
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem label="半径（米）" v-if="fenceForm.fenceType==1">
                    <Input
                      v-model="fenceForm.radius"
                      placeholder="在地图上绘制获得"
                      style="width:240px;"
                      :readonly="true"
                    />
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col :span="12">
                  <FormItem label="时间设置">
                    <Checkbox v-model="fenceForm.dateLimit">围栏有效期（不勾选，则永久有效）</Checkbox>
                  </FormItem>
                </Col>
                <Col :span="12">
                  <Row>
                    <Col :span="12">
                      <FormItem label="开始时间" prop="limitStart">
                        <DatePicker
                          type="date"
                          v-model="fenceForm.limitStart"
                          :disabled="!fenceForm.dateLimit"
                          style="width:140px;"
                        ></DatePicker>
                      </FormItem>
                    </Col>
                    <Col :span="12">
                      <FormItem label="结束时间" label-width="80" prop="limitEnd">
                        <DatePicker
                          type="date"
                          v-model="fenceForm.limitEnd"
                          :start-date="fenceForm.limitStart"
                          :disabled="!fenceForm.dateLimit"
                          style="width:140px;"
                        ></DatePicker>
                      </FormItem>
                    </Col>
                  </Row>
                </Col>
              </Row>
              <Row>
                <Col :span="12">
                  <FormItem label="报警类型">
                    <Row>
                      <Col :span="12">
                        <Row>
                          <Checkbox v-model="fenceForm.alarmIn">进入围栏报警</Checkbox>
                          <div>设备播报内容：(50字以内)</div>
                          <Input
                            v-model="fenceForm.alarmInText"
                            placeholder="不设置则不播报"
                            :disabled="!fenceForm.alarmIn"
                          />
                        </Row>
                        <Row>
                          <Checkbox v-model="fenceForm.alarmOut">离开围栏报警</Checkbox>
                          <div>设备播报内容：(50字以内)</div>
                          <Input
                            v-model="fenceForm.alarmOutText"
                            placeholder="不设置则不播报"
                            :disabled="!fenceForm.alarmOut"
                          />
                        </Row>
                      </Col>
                      <Col :span="12">
                        <Row>
                          <Checkbox v-model="fenceForm.alarmOverspeed">围栏内超速报警</Checkbox>
                          <div>设备播报内容：(50字以内)</div>
                          <Input
                            v-model="fenceForm.alarmOverspeedText"
                            placeholder="不设置则不播报"
                            :disabled="!fenceForm.alarmOverspeed"
                          />
                        </Row>
                        <Row>
                          <Checkbox v-model="fenceForm.alarmTimeout">围栏内超时报警</Checkbox>
                          <div>设备播报内容：(50字以内)</div>
                          <Input
                            v-model="fenceForm.alarmTimeoutText"
                            placeholder="不设置则不播报"
                            :disabled="!fenceForm.alarmTimeout"
                          />
                        </Row>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
                <Col :span="12">
                  <Row>
                    <Col :span="10">
                      <FormItem
                        label="限速（km/h）"
                        prop="limitSpeed"
                        :rules=" {
                       required: fenceForm.alarmOverspeed,
                       message: '限速为整数',
                       trigger: 'blur',
                      pattern: /^[0-9]\d*$/
                       }"
                      >
                        <Input
                          v-model="fenceForm.limitSpeed"
                          :disabled="!fenceForm.alarmOverspeed"
                          placeholder="请输入整数"
                          style="width:95px;"
                        />
                      </FormItem>
                    </Col>
                    <Col :span="14">
                      <FormItem
                        label="路段超速持续时间(s)"
                        :label-width="155"
                        prop="alarmOverspeedTime"
                        :rules=" {
                       required: fenceForm.alarmOverspeed,
                       message: '路段超速持续时间为整数',
                       trigger: 'blur',
                       pattern: /^[0-9]\d*$/
                       }"
                      >
                        <Input
                          v-model="fenceForm.alarmOverspeedTime"
                          :disabled="!fenceForm.alarmOverspeed"
                          placeholder="请输入整数"
                          style="width:105px;"
                        />
                      </FormItem>
                    </Col>
                  </Row>
                  <Row>
                    <FormItem
                      label="超时(min)"
                      prop="timeout"
                      :rules=" {
                       required: fenceForm.alarmTimeout,
                       message: '超时为整数',
                       trigger: 'blur',
                       pattern: /^[0-9]\d*$/
                       }"
                    >
                      <Input
                        v-model="fenceForm.timeout"
                        :disabled="!fenceForm.alarmTimeout"
                        placeholder="请输入整数"
                        style="width:240px;"
                      />
                    </FormItem>
                  </Row>
                </Col>
              </Row>
            </Form>
            <div slot="footer">
              <Button type="primary" :loading="submitLoading" @click="submitFence">提交</Button>
              <Button type="default" @click="fenceModalVisible = false">取消</Button>
            </div>
          </Modal>
        </div>
      </TabPane>
      <TabPane label="设备绑定信息">
        <deviceBindFence></deviceBindFence>
      </TabPane>
    </Tabs>
    <Modal
      title="绑定设备"
      v-model="bindModalVisible"
      :mask-closable="false"
      :width="1000"
      :styles="{top: '100px'}"
    >
      <deviceTable @showSelect="carSelect"></deviceTable>
      <div slot="footer">
        <Button type="primary" :loading="submitLoading" @click="submitBind">绑定</Button>
        <Button type="default" @click="bindModalVisible = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import dayjs from "dayjs";
let mouseTool = null;
import {
  getFencePageList,
  addFence,
  editFence,
  deleteFence,
  bindFence
} from "@/api/operate";
import circleLoading from "../../my-components/circle-loading.vue";
import { fenceDict } from "@/libs/dict";
import deviceTable from "./deviceTable.vue";
import deviceBindFence from "./deviceBindFence.vue";
export default {
  name: "fence-manage",
  components: {
    circleLoading,
    deviceTable,
    deviceBindFence
  },
  data() {
    return {
      deviceList: [], //选中绑定的设备carId
      bindModalVisible: false,
      fenceDict: fenceDict,
      loading: true,
      operationLoading: false,
      searchForm: {
        fenceName: "",
        fenceType: "",
        current: 1,
        size: 20,
        sort: "createTime",
        order: "desc"
      },
      fenceModalVisible: false,
      modalType: 0,
      selectCount: 0,
      selectList: [],
      modalTitle: "",
      fenceForm: {
        fenceId: "",
        fenceName: "",
        fenceType: 2,
        latlng: "",
        radius: "",
        dateLimit: false,
        limitStart: "",
        limitEnd: "",
        alarmIn: false,
        alarmInText: "",
        alarmOut: false,
        alarmOutText: "",
        alarmOverspeed: false,
        alarmOverspeedText: "",
        alarmTimeout: false,
        alarmTimeoutText: "",
        limitSpeed: "",
        timeout: "",
        alarmOverspeedTime: ""
      },
      fenceFormValidate: {
        fenceName: [
          { required: true, message: "围栏名称不能为空", trigger: "blur" }
        ],
        latlng: [{ required: true, message: "请绘制围栏", trigger: "blur" }]
      },
      submitLoading: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          width: 65,
          align: "center",
          fixed: "left"
        },
        {
          title: "围栏名称",
          key: "fenceName",
          width: 150,
          sortable: true
        },
        {
          title: "围栏类型",
          key: "fenceType",
          width: 180,
          render: (h, params) => {
            return h(
              "span",
              this.fenceDict.find(item => {
                return item.value == params.row.fenceType;
              }).label
            );
          }
        },
        {
          title: "报警类型",
          key: "fenceType",
          minWidth: 180,
          render: (h, params) => {
            let alarmType = [];
            if (params.row.alarmIn) {
              alarmType.push("进入围栏报警");
            }
            if (params.row.alarmOut) {
              alarmType.push("离开围栏报警");
            }
            if (params.row.alarmOverspeed) {
              alarmType.push("围栏内超速报警");
            }
            if (params.row.alarmTimeout) {
              alarmType.push("围栏内超时报警");
            }
            return h("span", alarmType.join(","));
          }
        },
        {
          title: "下发时间",
          key: "sendTime",
          sortable: true,
          sortType: "desc",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  directives: [
                    {
                      name: "has",
                      value: "edit"
                    }
                  ],
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  directives: [
                    {
                      name: "has",
                      value: "delete"
                    }
                  ],
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [],
      total: 0,
      map: null,
      drawingManager: null,
      allOverlay: []
    };
  },
  methods: {
    init() {
      this.getFenceList();
      this.mapInit();
    },
    removeAllOverlay() {
      if (this.allOverlay.length > 0) {
        this.allOverlay.forEach(v => {
          v.setMap(null);
        });
      }
      this.allOverlay = [];
    },
    mapInit() {
      let lat = 39.915168,
        lng = 116.403875,
        zoom = 10;
      let mapOptions = {
        center: new google.maps.LatLng(lat, lng), //地图的中心点
        zoom: 10, //地图缩放比例
        // mapTypeId: mapType, //指定地图展示类型：卫星图像、普通道路
        scrollwheel: true //是否允许滚轮滑动进行缩放
      };
      this.map = new google.maps.Map(
        document.getElementById("fenceMap"),
        mapOptions
      );
      let self = this;

      this.drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: false,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: ["circle", "polygon", "rectangle"]
        },
        markerOptions: {
          icon:
            "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
        }
      });
      this.drawingManager.setMap(this.map);
      function handleOverlayComplete() {
        self.drawingManager.setDrawingMode(null);
        self.drawingManager.setOptions({
          drawingControl: false,
          drawingControlOptions: { drawingModes: [] }
        });
      }
      google.maps.event.addListener(
        this.drawingManager,
        "circlecomplete",
        function(circle) {
          handleOverlayComplete();
          self.allOverlay.push(circle);
          let centerPoint = circle.getCenter();
          self.fenceForm.radius = circle.getRadius();
          self.fenceForm.latlng = centerPoint.lat() + "," + centerPoint.lng();
          console.log(circle);
        }
      );
      google.maps.event.addListener(
        this.drawingManager,
        "polygoncomplete",
        function(polygon) {
          handleOverlayComplete();
          self.allOverlay.push(polygon);
          let polygonBounds = polygon.getPath();
          let bounds = [];
          for (var i = 0; i < polygonBounds.length; i++) {
            var point =
              polygonBounds.getAt(i).lat() + "," + polygonBounds.getAt(i).lng();
            bounds.push(point);
          }
          self.fenceForm.latlng = bounds.join("|");

          console.log(self.fenceForm.latlng);
        }
      );
      google.maps.event.addListener(
        this.drawingManager,
        "rectanglecomplete",
        function(rectangle) {
          handleOverlayComplete();
          self.allOverlay.push(rectangle);
          let bounds = rectangle.getBounds();
          let northEastPoint = bounds.getNorthEast();
          let southWestPoint = bounds.getSouthWest();
          self.fenceForm.latlng =
            northEastPoint.lat() +
            "," +
            northEastPoint.lng() +
            "|" +
            southWestPoint.lat() +
            "," +
            southWestPoint.lng();
        }
      );
    },
    startDraw() {
      this.removeAllOverlay();
      let infoMsg = "";
      if (this.fenceForm.fenceType == 1) {
        //圆形
        infoMsg = "点击鼠标左键确定中心点，移动确定半径，松开鼠标完成";
        this.drawingManager.setOptions({
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ["circle"]
          },
          circleOptions: {
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillColor: "#1791fc",
            fillOpacity: 0.4,
            zIndex: 1
          }
        });
      } else if (this.fenceForm.fenceType == 2) {
        //矩形
        infoMsg = "点击鼠标左键确定左上角，松开鼠标完成确定矩形右下角";
        this.drawingManager.setOptions({
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ["rectangle"]
          },
          rectangleOptions: {
            strokeColor: "red",
            strokeOpacity: 0.5,
            strokeWeight: 6,
            fillColor: "blue",
            fillOpacity: 0.5,
            // strokeStyle还支持 solid
            strokeStyle: "solid"
            // strokeDasharray: [30,10],
          }
        });
      } else if (this.fenceForm.fenceType == 3) {
        //多边形
        infoMsg = "点击鼠标左键确定多边形的角，右键完成绘制";
        this.drawingManager.setOptions({
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ["polygon"]
          },
          polygonOptions: {
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillColor: "#1791fc",
            fillOpacity: 0.4,
            // 线样式还支持 'dashed'
            strokeStyle: "solid"
            // strokeStyle是dashed时有效
            // strokeDasharray: [30,10],
          }
        });
      }
      this.$Message.info(infoMsg);
    },
    changePage(v) {
      this.searchForm.current = v;
      this.getFenceList();
    },
    changePageSize(v) {
      this.searchForm.size = v;
      this.getFenceList();
    },
    getFenceList() {
      // 多条件搜索
      this.loading = true;
      getFencePageList(this.searchForm).then(res => {
        this.loading = false;
        if (res.code == 0) {
          this.data = res.data.records;
          this.total = res.data.total;
          this.clearSelectAll();
        }
      });
    },
    handleSearch() {
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.getFenceList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.fenceName = "";
      this.searchForm.fenceType = "";
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      // 重新加载数据
      this.getFenceList();
    },
    showSelect(e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getFenceList();
    },
    submitFence() {
      this.$refs.fenceForm.validate(valid => {
        if (valid) {
          console.log(this);
          this.submitLoading = true;

          if (this.fenceForm.dateLimit) {
            if (!(this.fenceForm.limitStart && this.fenceForm.limitEnd)) {
              this.submitLoading = false;
              this.$Message.warning(
                "勾选围栏有效期以后要选择开始时间和结束时间！"
              );
              return;
            } else {
              if (this.fenceForm.limitEnd <= this.fenceForm.limitStart) {
                this.submitLoading = false;
                this.$Message.warning("结束时间要大于开始时间！");
                return;
              }

              if (this.fenceForm.limitStart instanceof Date) {
                this.fenceForm.limitStart = dayjs(
                  this.fenceForm.limitStart
                ).format("YYYY-MM-DD HH:mm:ss");
              }
              if (this.fenceForm.limitEnd instanceof Date) {
                this.fenceForm.limitEnd = dayjs(this.fenceForm.limitEnd).format(
                  "YYYY-MM-DD HH:mm:ss"
                );
              }
            }
          }
          if (this.modalType == 0) {
            addFence(this.fenceForm).then(res => {
              this.submitLoading = false;
              if (res.code == 0) {
                this.$Message.success("操作成功");
                this.getFenceList();
                this.fenceModalVisible = false;
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            editFence(this.fenceForm).then(res => {
              this.submitLoading = false;
              if (res.code == 0) {
                this.$Message.success("操作成功");
                this.getFenceList();
                this.fenceModalVisible = false;
              } else {
                this.$Message.error(res.msg);
              }
            });
          }
        }
      });
    },
    add() {
      this.modalType = 0;
      this.modalTitle = "新增围栏";
      this.removeAllOverlay();
      this.fenceForm = {
        fenceId: "",
        fenceName: "",
        fenceType: 2,
        latlng: "",
        radius: "",
        dateLimit: false,
        limitStart: "",
        limitEnd: "",
        alarmIn: false,
        alarmInText: "",
        alarmOut: false,
        alarmOutText: "",
        alarmOverspeed: false,
        alarmOverspeedText: "",
        alarmTimeout: false,
        alarmTimeoutText: "",
        limitSpeed: "",
        timeout: "",
        alarmOverspeedTime: ""
      };
      this.fenceModalVisible = true;
    },
    edit(v) {
      this.modalType = 1;
      this.modalTitle = "编辑围栏";
      this.$refs.fenceForm.resetFields();
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      this.fenceForm = JSON.parse(JSON.stringify(v));
      this.removeAllOverlay();
      if (v.fenceType == 1) {
        // 构造矢量圆形
        let circleCenterPoint = v.latlng.split(",");

        var circle = new google.maps.Circle({
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillColor: "#1791fc",
          fillOpacity: 0.4,
          strokeStyle: "solid",
          map: this.map,
          center: new google.maps.LatLng(
            circleCenterPoint[0],
            circleCenterPoint[1]
          ),
          radius: v.radius
        });
        this.allOverlay.push(circle);
        this.map.panTo(
          new google.maps.LatLng(circleCenterPoint[0], circleCenterPoint[1])
        );
      } else if (v.fenceType == 2) {
        let recPoints = v.latlng.split("|");
        // 构造矢量矩形
        let northEastPoint = new google.maps.LatLng(
          recPoints[0].split(",")[0],
          recPoints[0].split(",")[1]
        );
        let southWestPoint = new google.maps.LatLng(
          recPoints[1].split(",")[0],
          recPoints[1].split(",")[1]
        );

        var bounds = new google.maps.LatLngBounds(
          southWestPoint,
          northEastPoint
        );

        var rectangle = new google.maps.Rectangle({
          bounds: bounds,
          strokeColor: "red",
          strokeOpacity: 0.5,
          strokeWeight: 6,
          fillColor: "blue",
          fillOpacity: 0.5,
          strokeStyle: "solid",
          map: this.map
        });
        this.allOverlay.push(rectangle);
        this.map.panTo(northEastPoint);
      } else if (v.fenceType == 3) {
        // 构造矢量多边形
        let polyPoints = v.latlng.split("|");
        let path = [];
        polyPoints.forEach(poly => {
          let item = poly.split(",");

          path.push({ lat: parseFloat(item[0]), lng: parseFloat(item[1]) });
        });

        var polygon = new google.maps.Polygon({
          paths: path,
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillColor: "#1791fc",
          fillOpacity: 0.4,
          // 线样式还支持 'dashed'
          strokeStyle: "solid",
          map: this.map
        });
        this.allOverlay.push(polygon);
        // this.map.panTo(path[0]);
      }
      this.fenceModalVisible = true;
    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除围栏 " + v.fenceName + " ?",
        loading: true,
        onOk: () => {
          deleteFence(v.fenceId).then(res => {
            this.$Modal.remove();
            if (res.code == 0) {
              this.$Message.success("删除成功");
              this.getFenceList();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    radioChange(v) {
      this.removeAllOverlay();
    },
    bind() {
      if (this.selectCount !== 1) {
        this.$Message.warning("请选择一个围栏绑定设备");
        return;
      }
      this.bindModalVisible = true;
    },
    carSelect(data) {
      console.log(data);
      this.deviceList = data.map(item => {
        return { deviceId: item.deviceId };
      });
    },
    submitBind() {
      this.submitLoading = true;
      if (this.deviceList.length == 0 || this.selectCount !== 1) {
        this.$Message.warning("请至少选择一个设备绑定");
        this.submitLoading = false;
        return;
      }
      let params = {
        fenceId: this.selectList[0].fenceId,
        deviceList: this.deviceList
      };
      bindFence(params).then(res => {
        this.submitLoading = false;
        if (res.code == 0) {
          this.$Message.success("绑定成功");
          this.getFenceList();
        } else {
          this.$Message.error(res.msg);
        }
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>